<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 控制台主页一</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <script src="/res/js/jquery-1.9.1.min.js"></script>
    <script src="/res/js/vue.js"></script>
</head>
<body>

<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">数据统计</div>
                        <div class="layui-card-body">

                            <div class=" layadmin-carousel layadmin-backlog">
                                <div carousel-item>

                                    <ul class="layui-row layui-col-space10">
                                        <li class="layui-col-xs6">
                                            <a href="javascript:;" class="layadmin-backlog-body">
                                                <h3>商家总数</h3>
                                                <p><cite>{{biz}}</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a href="javascript:;" class="layadmin-backlog-body">
                                                <h3>供应中心</h3>
                                                <p><cite>{{dc}}</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a href="javascript:;" class="layadmin-backlog-body">
                                                <h3>订单总数</h3>
                                                <p><cite>{{order}}</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a href="javascript:;" class="layadmin-backlog-body">
                                                <h3>订单商品</h3>
                                                <p><cite>{{order_goods}}</cite></p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">供需比例</div>
                        <div class="layui-card-body">

                            <div class=" layadmin-carousel layadmin-backlog">


                                <div id="bili" style="height: 185px"></div>


                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-dataview">
                                <div id="LAY-index-dataview" style="height: 332px">

                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="layui-card">


                        <div class="layui-card-header">版本信息</div>
                        <div class="layui-card-body layui-text">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="100">
                                    <col>
                                </colgroup>
                                <tbody>
                                <tr>
                                    <td>当前版本</td>
                                    <td>
                                        Xrenz v1.2
                                    </td>
                                </tr>
                                <tr>
                                    <td>基于框架</td>
                                    <td>
                                        TP5 Layui Vue
                                    </td>
                                </tr>
                                <tr>
                                    <td>服务支持</td>
                                    <td>云处理网络、机智物联PHP开发组</td>
                                </tr>

                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

<script src="/layuiadmin/layui/layui.js?t=1"></script>
<script src="/res/echarts.min.js"></script>
<!--<script src="/layuiadmin/lib/extend/echarts.js"></script>-->
<!--<script src="/layuiadmin/lib/extend/echartsTheme.js"></script>-->

<script>


    //vue对象
    var app = new Vue({
        el: '#app',
        data: {
            biz: '..',
            dc: '..',
            order: '..',
            order_goods: '..',
        }
    });


    // 基于准备好的dom，初始化echarts实例
    var bili = echarts.init(document.getElementById('bili'));
    //自适应宽高
    //    bili.style.width = $('#bili').innerWidth() + 'px';
    //    bili.style.height = $('#bili').innerHeight() + 'px';

    // 指定图表的配置项和数据
    var bili_option = {
        title: {
            text: '加载中..',
            x: 'center',
            textStyle: {
                fontSize: 14
            }
        },
        tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
        legend: {
            right: 10,              // legend 放置在右侧中间。
            top: '15%',
            orient: "vertical", x: "left", data: ["商家", "供应商"]
        },
        series: [{
            name: "供需比例",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [{
                value: 500, name: "商家", itemStyle: {
                    color: '#009688'
                }
            }, {
                value: 100, name: "供应商", itemStyle: {
                    color: '#01AAED'
                }
            }]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    bili.setOption(bili_option);

    //异步更新数据
    $.get("{:url('total')}", '', function (res) {
        app.biz = res.biz;
        app.dc = res.dc;
        app.order = res.order;
        app.order_goods = res.order_goods;
        var bili_option2 = {
            title: {
                text: '',
                x: 'center',
                textStyle: {
                    fontSize: 14
                }
            },

            series: [{
                name: "供需比例",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: [{
                    value: res.biz, name: "商家", itemStyle: {
                        color: '#009688'
                    }
                }, {
                    value: res.dc, name: "供应商", itemStyle: {
                        color: '#01AAED'
                    }
                }]
            }]
        };
        bili.setOption(bili_option2);
    })
    //自动重绘
    window.onresize = bili.resize


    // 基于准备好的dom，初始化echarts实例
    var dataview = echarts.init(document.getElementById('LAY-index-dataview'));
    //自适应宽高
    //    bili.style.width = $('#bili').innerWidth() + 'px';
    //    bili.style.height = $('#bili').innerHeight() + 'px';

    // 指定图表的配置项和数据
    var dataview_option = {
        title: {
            text: '数据加载中...',
            x: 'center',
            textStyle: {
                fontSize: 14
            }
        },
        tooltip: { //提示框
            trigger: 'axis',
            formatter: "{b}<br>新增用户：{c}"
        },
        xAxis: [{ //X轴
            type: 'category',
            boundaryGap: false,
            data: ['11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13'],
        }],
        yAxis: [{  //Y轴
            type: 'value'
        }],
        series: [{ //内容
            type: 'line',
            smooth: true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [0, 10, 20, 30, 40, 20, 10],
        }],
        color: ['#009688']

    };

    // 使用刚指定的配置项和数据显示图表。
    dataview.setOption(dataview_option);

    //异步更新数据
    $.get("{:url('get_order_count')}", '', function (res) {

        var dataview_option2 = {
            title: {
                text: '',
                x: 'center',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: { //提示框
                trigger: 'axis',
                formatter: "{b}<br>订单：{c}"
            },
            xAxis: [{ //X轴
                type: 'category',
                boundaryGap: false,
                data: res.data.date,
            }],
            yAxis: [{  //Y轴
                type: 'value'
            }],
            series: [{ //内容
                type: 'line',
                smooth: true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: res.data.count,
            }],
        };
        dataview.setOption(dataview_option2);
    })

    //自动重绘
    window.onresize = dataview.resize


</script>
</body>
</html>

